<template>
  <div class="accessTrain">
    <app-header></app-header>
    <div class="exmine">
      <h3><span></span>进入培训</h3>
      <div class="toExam" v-show="model.isExam">
        <router-link :to="{name:'enterExam',query:{type:2,id:trainClassId}}"><img src="../../assets/images/examine_img1.png"></router-link>
        <router-link :to="{name:'enterExam',query:{type:1,id:trainClassId}}" v-if="model.isExam && model.isCanExamTime"><img src="../../assets/images/examine_img2.png"></router-link>
        <a v-else><img src="../../assets/images/examine_img3.png"></a>
      </div>
      <p class="examTime">考试时间:<span v-if="model.isExam">{{model.examStartDate|dateFormat('YYYY-MM-DD')}}至{{model.examEndDate|dateFormat('YYYY-MM-DD')}}</span><span v-else>待定</span></p>
    </div>
    <div class="curse_box">
      <h3 class="secTitle" v-show="netCur">线上课程信息<span :class="{'hideMore':toggle}" @click="hideMore"></span></h3>
      <p class="trainTime" v-show="model.TrainStartTime">培训时间:{{model.TrainStartTime}}至{{model.TrainEndTime}}</p>
      <p class="studyTime"><span>必修学时:<span style="color:red;">{{model.needStudyTime}}</span></span><span>选修学时:<span style="color:red;">{{model.pickStudyTime}}</span></span><span>已修学时:<span style="color:red;">{{model.studyTime}}</span></span></p>
      <ul class="curse_list1" v-if="!toggle">
        <li v-for="(item, index) in model.courseList" :key="index" class="curse_item">
          <img :src="item.courseImg" />
          <div class="item_right">
            <h4>{{item.courseName}}</h4>
            <p class="time1"><span>学习要求:{{item.studyRequired=='1'?'必修':'选修'}}</span><span>应修学时:{{item.courseTime}}学时</span></p>
            <p class="time2"><span>已修学时:<span v-if="item.hasStudyTime<item.courseTime" style="color:red">{{item.hasStudyTime}}</span><span v-else>{{item.hasStudyTime}}</span>学时</span></p>
            <div class="study_process">
              <!--<x-circle :percent="item.progress"
                        :stroke-width="1"
                        stroke-color="#04BE02"
                        anticlockwise>
                <span>{{ item.progress }}%</span>
              </x-circle>-->
              <x-progress :percent="item.progress" :show-cancel="false"></x-progress>
            <span>{{item.progress}}%</span>
            </div>
            <div class="btnBox">
              <router-link :to="{name:'course',query:{id:trainClassId,cuid:item.courseId}}" class="baoBtn" v-if="item.courseWareCount>0">学习</router-link>
              <router-link :to="{name:'exercise',query:{id:item.courseId}}" v-if="item.questionNum>0" class="detailBtn">练习</router-link>
            </div>
          </div>
        </li>
      </ul>
      <h3 class="secTitle" v-show="faceCur" >线下课程信息<span :class="{'hideMore':toggleNet}" @click="hideMoreNet"></span></h3>
      <!--<p class="trainTime" v-if="model.isReport">报到时间:{{model.reportDate}}</p>-->
      <ul class="curse_list1" v-if="!toggleNet">
        <li v-for="(item, index) in model.faceCourseList" :key="index" class="curse_item">
          <img :src="item.courseImg" />
          <div class="item_right">
            <h4>{{item.courseName}}</h4>
            <p class="time1"><span>学习要求:{{item.studyRequired=='1'?'必修':'选修'}}</span><span>应修学时:{{item.courseTime}}学时</span></p>
            <p class="time2"><span>已修学时:<span v-if="item.hasStudyTime<item.courseTime" style="color:red">{{item.hasStudyTime}}</span><span v-else>{{item.hasStudyTime}}</span>学时</span></p>
            <div class="study_process">
              <!--<x-circle :percent="item.progress"
                        :stroke-width="1"
                        stroke-color="#04BE02"
                        anticlockwise>
                <span>{{ item.progress }}%</span>
              </x-circle>-->
              <x-progress :percent="item.progress" :show-cancel="false"></x-progress><span>{{item.progress}}%</span>
            </div>
            <div class="btnBox">
              <router-link :to="{name:'course',query:{id:trainClassId,cuid:item.courseId}}" class="baoBtn" v-if="item.courseWareCount>0">学习</router-link>
              <router-link :to="{name:'exercise',query:{id:item.courseId}}" v-if="item.questionNum>0" class="detailBtn">练习</router-link>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div v-transfer-dom class="answer">
      <popup v-model="show">
        <div class="msgDiv">
          <img src="../../assets/images/notice.png">
          <p>请进行培训评估!</p>
          <span class="confirmBtn" @click="show=false">确 &nbsp;&nbsp; 定</span>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import { XProgress,XCircle, TransferDom, Popup } from 'vux'
  import VueBetterScroll from "vue2-better-scroll"
  import { getEntryTrainClassInfo, getCourseWareList } from "@/api/trainClass";
  import appHeader from "../../components/header";

  export default {
    name: 'accessTrain',
    components: {
      appHeader,
      XProgress,
      XCircle,
       Popup,
      TransferDom,
      VueBetterScroll
    },
    data() {
      return {
        trainClassId: '',
        model: {},
        toggleNet: false,
        toggle: false,
        faceCur: false,
        netCur: false,
        show: false,
      }
    },
    created() {
      let that = this;
      this.trainClassId = this.$route.query.id;
      this.fetchData();
    },
    methods: {
      hideMore: function () {
        this.toggle = !this.toggle;
      },
      hideMoreNet: function () {
        this.toggleNet = !this.toggleNet;
      },
      fetchData() {
        let that = this;
        this.$vux.loading.show({
          text: "Loading"
        });
        getEntryTrainClassInfo({ id: this.trainClassId }).then(response => {
          this.model = response;

          that.$vux.loading.hide();

          if (response.courseList.length > 0) {
            that.netCur = true;
          } else {
            that.netCur = false;
          }
          if (response.faceCourseList.length > 0) {
            that.faceCur = true;
          } else {
            that.faceCur = false;
          }
       
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .answer .vux-popup-dialog {
      position: fixed;
      left: calc((100% - 290px)/2);
      top: 150px;
      width: 290px;
      height: 170px !important;
      border-radius: 10px;
      background: #ffffff;
      overflow-y: visible;
    }

    .msgDiv {
      text-align: center;
      padding: 13px 25px 20px 25px;
    }

      .msgDiv img {
        height: 50px;
        width: 50px;
      }

      .msgDiv p {
        font-size: 15px;
        color: #fe6000;
        font-weight: bold;
        margin-top: 5px;
      }

    .confirmBtn {
      display: inline-block;
      height: 40px;
      font-size: 15px;
      background-color: #2269ff;
      font-weight: bold;
      line-height: 40px;
      width: 100px;
      color: #ffffff;
      text-align: center;
      border-radius: 10px;
      margin-top: 16px;
    }

        .vux-circle-demo {
      text-align: center;
      width: 24px;
    }

    .accessTrain {
      background: #ebeef2;
    }

    .exmine {
      background: #fff;
      padding: 0 15px;
      margin-bottom: 5px;
      padding-top:65px;
    }

      .exmine h3 {
        font-size: 16px;
        color: #333;
        display: flex;
        align-items: center;
        height: 50px;
      }

        .exmine h3 span {
          height: 16px;
          width: 4px;
          border-radius: 2px;
          display: block;
          background: #2269ff;
          margin-right: 5px;
        }

    .toExam {
      display: flex;
      justify-content: space-between;
      padding: 0 6px;
    }

      .toExam a {
        display: block;
      }

        .toExam a img {
          height: 60px;
          width: 150px;
        }

    .examTime {
      color: #fe6000;
      font-size: 13px;
      background: url('../../assets/images/time_icon.png') no-repeat left center;
      padding: 12px 0 15px 16px;
      background-size: 11px 11px;
      text-align: left;
    }

    .trainTime {
      color: #333;
      font-size: 13px;
      background: url('../../assets/images/time_icon.png') no-repeat left center;
      padding-left: 16px;
      background-size: 11px 11px;
      text-align: left;
      margin: 10px 0 8px;
    }

    .studyTime {
      color: #2269ff;
      text-align: left;
      font-size: 13px;
      margin-bottom: 10px;
    }

      .studyTime span {
        margin-right: 10px;
      }

    ul, ul li {
      list-style: none;
      font-size: 14px;
    }

    .curse_box {
      padding: 0 15px;
      background: #fff;
    }

    h3.secTitle {
      font-size: 15px;
      font-weight: bold;
      color: #2269ff;
      display: flex;
      align-items: center;
      height: 40px;
      position: relative;
    }

      h3.secTitle span {
        position: absolute;
        display: block;
        height: 20px;
        width: 20px;
        background: url('../../assets/images/show_more.png') no-repeat center center;
        background-size: 12px 7px;
        right: 11px;
        top: 10px;
        transform: rotate(0deg);
        transition: .3s;
      }

        h3.secTitle span.hideMore {
          transform: rotate(180deg);
          transition: .3s
        }

    .curse_list1 {
      padding-top: 20px;
      border-top: 1px solid #efeff4;
    }

      .curse_list1 li:last-child {
        margin-bottom: 0;
        padding-bottom:5px;
      }

    .curse_list2 {
      border-top: 1px solid #efeff4;
      padding-top: 15px;
      text-align: left;
    }

      .curse_list2 li {
        font-weight: bold;
        font-size: 15px;
        list-style: none;
        line-height: 26px;
      }

    .curse_item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 25px;
      height: 95px;
      align-items: center;
    }

      .curse_item img {
        width: 135px;
        height: 90px;
      }

    .item_right {
      margin-left: 10px;
      width: calc(100% - 145px);
      padding:2px 0;
    }

      .item_right h4 {
        font-size: 15px;
        font-weight: bold;
        color: #333;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
      }

      .item_right p {
        color: #999;
        font-size: 12px;
        text-align: left;
      }

        .item_right p.time1 {
          display: flex;
          justify-content: space-between;
        }

        .item_right p.time2 {
          color: #2269ff;
        }

    .btnBox {
      text-align: left;
      height: 25px;
      display: flex;
    }

      .btnBox a {
        display: inline-block;
        width: 65px;
        height: 25px;
        text-decoration: none;
        text-align: center;
        line-height: 25px;
        font-size: 12px;
        border-radius: 5px;
        box-sizing: border-box;
      }

    .baoBtn {
      background: #2269ff;
      color: #fff;
    }

    .detailBtn {
      border: 1px solid #2269ff;
      color: #2269ff;
      margin-left: 12px;
    }

    .study_process {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0;
      height:12px;
    }

      .study_process span {
        font-size: 12px;
        color: #2269ff;
      }

        .study_process span.start {
          color: #fe6000;
        }

        .study_process span.end {
          color: #999;
        }


</style>
<style lang='less' scope>
  .accessTrain {
    .weui-progress

  {
    width: 150px;
    height: 8px;
    .weui-progress__bar

  {
    height: 8px;
    border-radius: 5px;
    background: #eee;
    padding: 1px;
    padding-bottom:0;
    .weui-progress__inner-bar

  {
    height: 8px;
    border-radius: 4px;
    background: #2269ff;
  }

  }
  }
  }
</style>
